import React from 'react';
import { Carousel } from 'antd';
import tubiao from '../../assets/pic1.jpg'


import { useEffect, useState } from 'react'
import{base_swiper2} from '../../utils/api'


function ServiceCenter(props) {
    const contentStyle = {
        height: '300px',
        color: '#fff',
        lineHeight: '300px',
        textAlign: 'center',
        
    };

    //引入组件状态
    var [rolelist , setRolelist] = useState([])
    useEffect(() => {
        // console.log('生命周期函数');
        base_swiper2().then((res)=>{
            if(res.data.code===200){
                // console.log(res.data.list);
                setRolelist(res.data.list)
            }
        })
    }, [])



    return (
        <div className='servicecenter'>
            <Carousel autoplay className='box'>
                {
                    rolelist.map((item,index)=>{
                        return (
                            <div key={index}>
                                <h3 style={contentStyle}>
                                    <img src={item.img} alt="" />
                                </h3>
                            </div>
                        )
                    })
                }
                


                
            </Carousel>
            <div className='quanchuang'>全场景服务(申请开通请咨询在线客服或致电400-666-8888)</div>
            <ul>
                <li>
                    <img src={tubiao} alt="" />
                    <p>在线系统</p>
                </li>
                <li>
                    <img src={tubiao} alt="" />
                    <p>在线系统</p>
                </li>
                <li>
                    <img src={tubiao} alt="" />
                    <p>在线系统</p>
                </li>
                <li>
                    <img src={tubiao} alt="" />
                    <p>在线系统</p>
                </li>
            </ul>
        </div>
    );
}

export default ServiceCenter;